<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/layui.js"></script>
    <script src="./power.js"></script>
    <title>文章列表</title>
    <style>
        #root{
            width: 1000px;
        }
        a:hover{
            text-decoration: underline;
        }
        #root li{
            margin: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            区域论坛系统
        </div>
        <ul>
            <li><a href="/">论坛首页</a></li>
            <li><a href="/article/addArticle">发帖</a></li>
            <li><a href="/article/about">关于我们</a></li>
            <li class="search">
                <div>
                    <div>
                        <input id="searchtext" type="search" placeholder="请输入搜索内容">
                        <a id="searchIcon"><img  src="/search.svg" alt="" class="glass"> </a>
                    </div>
                    <script>
                        layui.use(function(){
                            let $ = layui.$;
                                $('#searchtext').change(function(res){
                                    if($(this).val() != '')
                                    $('#searchIcon').attr('href','/article/search/' + $('#searchtext').val())
                                    else{
                                        $('#searchIcon').attr('href','')
                                    }
                                })
                            })
                    </script>
                </div>
            </li>
        </ul>


        <div class="user"></div>
        <script>
             layui.use( function(){
                  var $ = layui.$
                  if(sessionStorage.user){
                    $('.user').append(`
                        <div>欢迎您：<a class="my" href="/user/users/${JSON.parse(sessionStorage.user).id}">${JSON.parse(sessionStorage.user).username}</a></div>
                    `)
                  }else{
                      $('.user').append(`
                        <div class="login">
                            <a href="/user/userLogin">登录</a>
                        </div>
                        <div class="regrister">
                            <a href="/user/regrister">注册</a>
                        </div>
                      `)
                  }
                });
        </script>
    </header>
    <div id="root">
        <h1><%= title %></h1>
        <ul>
            <% for(let i = 0;i<data.length;i++) {%>
                <li>
                    <a href="/article/detail/<%= data[i].id %>" style="color: blue;"><%= data[i].title %></a>
                </li>
            <% } %>
            <% if(!data.length){ %>
            <li>
                暂无结果，请浏览其他内容！
            </li>
            <% } %>
        </ul>
    </div>
</body>
</html>